<template>
    <div>
        <div class="topdiv"></div>
        <div class="header_wrap">
            <div class="header">
                <p :class="{active:type=='pop'}" @click="sort('pop')">流行</p>
                <p :class="{active:type=='sell'}" @click="sort('sell')">热销</p>
                <p :class="{arrow_top:!price_type,arrow_bottom:price_type}" @click="price()">价格</p>
            </div>
            <div :class="{price_wrap_on:price_type,price_wrap_off:!price_type}">
                <div class="price_level">
                    <p @click="sortprice(0,30)">0-30</p>
                    <p @click="sortprice(30,60)">30-60</p>
                    <p @click="sortprice(60,1000)">60以上</p>
                </div>
                <div class="price-area">
                    <input type="text" v-model="minprice">
                    <span></span>
                    <input type="text" v-model="maxprice">
                    <p class="cancel" @click="pcancel()">清空</p>
                    <p class="enter" @click="penter()">确认</p>                    
                </div>
            </div> 
        </div>
        
        
        <ul class="Preference_wrap">    
            <router-link tag="li" class="Preference_list"
            :to="{path:'commodity',query:{deviceId:item.iid}}" 
            v-for="(item,index) in Preference_list" :key='index'>
                <div class="img_wrap">
                    <img :src="item.show.img">
                    <div class="hot_img">
                        <img :src="item.leftbottom_taglist">
                    </div>
                </div>
                <p class="title">{{item.title}}</p>
                <span class="current">{{item.price}}</span>
                <p class="sale_num">{{item.sale}}人已购买</p>
                
            </router-link>
        </ul>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                Preference_list:[],scrolled:0,flag:false,page:1,
                linknum:"",type:"pop",price_type:false,maxPrice:"",
                minPrice:"",minprice:"",maxprice:"",uq:'',cKey:'wap-cate'
                }
        },
        watch:{
                flag(curVal,oldVal){
                    if(this.flag){
                        this.page++;
                        this.$http.jsonp('http://list.meilishuo.com/search',
                        {params:{
                                frame:0,
                                sort: this.type,
                                maxPrice:this.maxPrice,
                                minPrice:this.minPrice,
                                uq:this.uq,
                                cKey: this.cKey,
                                page: this.page,
                                fcid: this.linknum
                                }},
                        {jsonp:'jsonp1'})
                        .then(function(res){
                            this.Preference_list=this.Preference_list.concat(res.body.data.list);
                        })
                    
                    }
　　　　　　　　 },
            type(curVal,oldVal){
                this.$http.jsonp('http://list.meilishuo.com/search',
                {params:{
                        frame:0,
                        sort: this.type,
                        maxPrice:this.maxPrice,
                        minPrice:this.minPrice,
                        uq:this.uq,
                        cKey: this.cKey,
                        page: this.page,
                        fcid: this.linknum
                        }},
                {jsonp:'jsonp1'})
                .then(function(res){
                    this.Preference_list=res.body.data.list
                })
            },
            minPrice(curVal,oldVal){
                this.$http.jsonp('http://list.meilishuo.com/search',
                {params:{
                        frame:0,
                        sort: this.type,
                        maxPrice:this.maxPrice,
                        minPrice:this.minPrice,
                        uq:this.uq,
                        cKey: this.cKey,
                        page: this.page,
                        fcid: this.linknum
                        }},
                {jsonp:'jsonp1'})
                .then(function(res){
                    this.Preference_list=res.body.data.list
                })
            }            
        },
        mounted(){
            window.addEventListener('scroll', this.handleScroll);            
            if(this.$route.query.deviceId){
                let address=this.$route.query.deviceId;
                let num=address.indexOf('fcid=');
                this.linknum=address.slice(num+5,num+13);
            }
            if(this.$route.query.uq){
                this.uq=this.$route.query.uq;
                this.cKey=this.$route.query.cKey;
            }    
            this.$http.jsonp('http://list.meilishuo.com/search',
                {params:{
                        frame:0,
                        sort: "pop",
                        maxPrice:this.maxPrice,
                        minPrice:this.minPrice,
                        uq:this.uq,
                        cKey: this.cKey,
                        page: this.page,
                        fcid: this.linknum
                        }},
                {jsonp:'jsonp1'})
                .then(function(res){
                    this.Preference_list=res.body.data.list
                })
        },
        beforeDestroy() {
             window.removeEventListener('scroll', this.handleScroll);
        },
        methods:{
            handleScroll () {
                this.scrolled =document.body.scrollTop;
                if(document.body.offsetHeight-this.scrolled<=window.screen.height){
                    this.flag=true
                }else{
                    this.flag=false                  
                }
            },
            sort(str){
                this.type=str;
                this.scrolled = document.body.scrollTop = 0;
            },
            price(){
                this.price_type=!this.price_type
            },
            sortprice(p1,p2){
                this.price_type=false;
                this.minPrice=p1;
                this.minprice=p1;
                this.maxPrice=p2;
                this.maxprice=p2;
            },
            pcancel(){
               this.minprice="";
               this.maxprice="";
            },
            penter(){
                this.price_type=false;
                this.minPrice= this.minprice;
                this.maxPrice= this.maxprice;
            }
        }
    }
</script>
<style scoped>
    .topdiv{
        height: 1.8rem;
    }
    .header_wrap{
        width: 100%;
        position: fixed;
        top: 0; 
        z-index: 9999;                     
    }
    .header{
        width: 100%;
        height: 1.8rem;
        display: flex;
        z-index: 9999;
        background: #fff;
    }
    .header p{
        width: 33.333%;
        flex-grow: 1;
        font-size: 0.7rem;
        color: rgb(102, 102, 102);
        text-align: center;
        line-height: 1.8rem;
    }
    .header .arrow_top{
        background: url(../../static/images/170706_7d6f70iaill2c55je7h09225ida77.png) no-repeat 88% center;
        background-size: 12%  
    }
    .header .arrow_bottom{
        background: url(../../static/images/170706_7d6f70iaill2c55je7h09225ida77top.png) no-repeat 88% center;
        background-size: 12%  
    }
    .price_level{
        width: 100%;
        height: 2.3rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .price_level p{
        width: 25%;
        height: 1.2rem;
        background: #f3f3f3;
        color: #666;
        line-height: 1.2rem;
        font-size: 0.55rem;
        text-align: center;
    }
    .price-area{
        width: 100%;
        height: 2.3rem;
        display: flex;
        justify-content:space-around;
        align-items: center;
    }
    .price-area input{
        width: 3.5rem;
        height: 1.2rem;
        outline: none;
        font-size: 0.6rem;
    }
    .price-area p{
        height: 1.2rem;
        width: 3rem;
        line-height: 1.2rem;
        text-align: center;
        font-size: 0.55rem;
        border-radius: 5%;
    }
    .price_wrap_on{
        background: #fff;
        opacity: 1;
    }
    .price_wrap_off{
        opacity: 0;
    }    
    .price-area .cancel{
        border: 1px solid #ff5b76;
        color:#ff5b76;
    }
    .price-area .enter{
       background: #ff5b76;
       color: #fff;
    }
    .price-area span{
        width: 0.4rem;
        border-top: 1px solid #cbcbcb; 
    }
    .Preference_wrap{
        display: flex;
        flex-wrap: wrap;
    }
    .Preference_list{
        width: 50%;
        text-align: center; 
        padding: 0 1% 3% 1%;
    }
    .hot_img{
        width: 1.6rem;
        height: 0.8rem;
        position: absolute;
        bottom: 0;
        left: 0.1rem;
    }
    .img_wrap{
        position: relative;        
        width: 100%;
        height: 10rem;
        overflow: hidden;
    }
    .img_wrap img{
        width: 100%
    }
    .current{
        color: #FF3366;
        font-size: 0.6rem;
        height: 1rem;
        line-height: 1rem;
    }
    .title{
        height: 1rem;
        line-height: 1rem;
        color: rgb(102, 102, 102);
        font-size: 0.5rem;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .sale_num{
        color: rgb(153, 153, 153);
    }
    .header .active{
        color: red;
    }
</style>